{% extends "admin/base.html" %}

{% block title %}{% if action == 'add' %}添加网站链接{% else %}编辑网站链接{% endif %}{% endblock %}

{% block page_title %}{% if action == 'add' %}添加网站链接{% else %}编辑网站链接{% endif %}{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h2>{% if action == 'add' %}添加新网站链接{% else %}编辑网站链接{% endif %}</h2>
    </div>
    <div class="card-body">
        <form method="post" action="/admin/links/save" enctype="multipart/form-data">
            {% if link %}
            <input type="hidden" name="id" value="{{ link.id }}">
            {% endif %}
            
            <div class="form-group">
                <label for="name">名称 <span style="color: #e74c3c;">*</span></label>
                <input type="text" id="name" name="name" value="{% if link %}{{ link.name }}{% endif %}" required>
            </div>
            
            <div class="form-group">
                <label for="category_id">分类 <span style="color: #e74c3c;">*</span></label>
                <select id="category_id" name="category_id" required>
                    {% if categories %}
                        {% for category in categories %}
                        <option value="{{ category.id }}" {% if link and link.category_id == category.id %}selected{% endif %}>{{ category.name }}</option>
                        {% endfor %}
                    {% endif %}
                </select>
                <small style="display: block; color: #666; margin-top: 5px;">如需添加新分类，请<a href="/admin/link-categories/add" target="_blank">点击这里</a></small>
            </div>
            
            <div class="form-group">
                <label for="url">链接 <span style="color: #e74c3c;">*</span></label>
                <input type="url" id="url" name="url" value="{% if link %}{{ link.url }}{% endif %}" required>
            </div>
            
            <div class="form-group">
                <label for="icon_file">图标文件 <span style="color: #e74c3c;">*</span></label>
                <input type="file" id="icon_file" name="icon_file" accept="image/*" {% if not link %}required{% endif %}>
                <small style="display: block; color: #666; margin-top: 5px;">支持PNG、JPG、SVG等常见图片格式</small>
            </div>
            
            {% if link and link.icon and (link.icon.startswith('/uploads/') or link.icon.startswith('/static/uploads/')) %}
            <div class="form-group">
                <label>当前图标</label>
                <div>
                    <img src="{{ link.icon }}" alt="当前图标" style="max-width: 100px; max-height: 100px;">
                </div>
                <input type="hidden" name="existing_icon" value="{{ link.icon }}">
                <div class="form-check mt-2">
                    <input type="checkbox" class="form-check-input" id="remove_icon" name="remove_icon">
                    <label class="form-check-label" for="remove_icon">移除当前图标</label>
                </div>
            </div>
            {% endif %}
            
            <div class="form-group">
                <label for="description">网站介绍</label>
                <textarea id="description" name="description" rows="4" placeholder="输入网站的简要介绍信息">{% if link %}{{ link.description }}{% endif %}</textarea>
                <small style="display: block; color: #666; margin-top: 5px;">添加网站的描述信息，选填</small>
            </div>
            
            <div class="form-check">
                <input type="checkbox" id="is_active" name="is_active" {% if not link or link.status %}checked{% endif %}>
                <label for="is_active">启用</label>
            </div>
            
            <div style="margin-top: 30px;">
                <button type="submit" class="btn btn-primary" style="margin-right: 10px;">保存</button>
                <a href="/admin/links" class="btn btn-secondary">取消</a>
            </div>
        </form>
    </div>
</div>

<!-- 表单校验脚本 -->
<script>
(function() {
    var form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(event) {
            // 表单提交校验
            var nameInput = document.getElementById('name');
            var categorySelect = document.getElementById('category_id');
            var urlInput = document.getElementById('url');
            var iconInput = document.getElementById('icon_file');
            var removeIconCheckbox = document.getElementById('remove_icon');
            
            // 检查必填字段
            if (!nameInput.value.trim()) {
                alert('请输入网站名称');
                nameInput.focus();
                event.preventDefault();
                return false;
            }
            
            if (!categorySelect.value) {
                alert('请选择分类');
                categorySelect.focus();
                event.preventDefault();
                return false;
            }
            
            if (!urlInput.value.trim()) {
                alert('请输入网站链接');
                urlInput.focus();
                event.preventDefault();
                return false;
            }
            
            // 检查图标是否必填
            var isEditPage = document.querySelector('input[name="id"]') !== null;
            var needNewIcon = (!isEditPage || (removeIconCheckbox && removeIconCheckbox.checked));
            
            if (needNewIcon && (!iconInput.files || iconInput.files.length === 0)) {
                alert('请上传网站图标');
                iconInput.focus();
                event.preventDefault();
                return false;
            }
            
            return true;
        });
    }
})();
</script>
{% endblock %}